<!--
 * @Author: liaoxing
 * @Date: 2021-08-18 09:41:39
 * @LastEditors: liaoxing
 * @LastEditTime: 2021-08-27 15:06:45
 * @Description: file content
 * @FilePath: \数据中心\src\views\home\BoardPage\FinanceBoard\Top.vue
-->
<template>
  <div class='top'>
    <div class='topTotalLeft'>总收入</div>
    <div class='topTotalRight'>总投入</div>
    <div class='topTime'>
      <span class='time1'>{{ ymd }}</span>
      <span class='time2'>{{ hms }}</span>
    </div>

    <div class='title'>
      总盈亏
    </div>
  </div>
</template>

<script>

export default {
  components: {},
  data(){
    return {
      currentNav: '',
      ymd: '',
      hms: ''
    }
  },
  mounted(){
    this.getTimes()
  },
  methods: {
    getTimes () {
      this.ymd = this.util.timeFormat3(new Date().getTime())
      this.hms = this.util.timeFormat4(new Date().getTime())
      let timeOut = setTimeout(() => {
        window.clearTimeout(timeOut)
        this.getTimes()
      }, 1000)
    }
  }
}
</script>
<style scoped lang='less'>

.top {
  position: relative;
  width: 100%;
  height: 83px;

  background-image: url(../../../../assets/chartBg/FinanceBoard6.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;


  .topTotalLeft {
    position: absolute;
    bottom: 0;
    left: 80px;
    font-size: 26px;
    font-weight: bold;
    color: #15BEC6;
  }

  .topTotalRight {
    position: absolute;
    bottom: 0;
    right: 80px;
    font-size: 26px;
    font-weight: bold;
    color: #15BEC6;
  }

  .topTime {
    position: absolute;
    right: 300px;
    top: 5px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    .time1 {
      font-size: 18px;
      font-weight: 400;
      color: #F6F6F6;
      opacity: 0.5;
    }
    .time2 {
      margin-left: 30px;
      font-size: 20px;
      font-weight: 400;
      color: #F6F6F6;
    }
  }

  .title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-size: 36px;
    font-weight: 400;
    color: #E9F2F9;
  }
}


</style>
